<template>
	<div class="Body">
		<div class="searchBox">
			<el-input placeholder="请输入内容" v-model="input" style="width: 30%;" clearable>
			</el-input>
			<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
		</div>
		<div class="sortBox">
			<a href="#" @click="FarmAll">全部</a>
			<a href="#" @click="handleSortClick(item.sortContent)" v-for="(item,index) in sortDta" :key="index">{{item.sortContent}}</a>
		</div>
		<div class="farmBody"><!-- 农产品内容与分类大框 -->
			<div class="FarmBox">
				<el-card class="farmCard" @click.native="skipFarmInfo(item.farmId)" v-for="(item,index) in farmData"
					:key="index" shadow="hover">
					<img :src="$store.state.imgShowRoad2 + '/file/' + item.shopPicture" />
					<div class="farmname">
						<span>{{item.farmName}}</span>
					</div>
					<div style="color: #ff6000;margin: 0 8px 0 8px;">
						<span style="font-size: 16px; line-height: 16px;margin-right: 2px;">￥</span>
						<span style="font-size: 18px;">{{minSpecPrice(item)}}</span>
					</div>
				</el-card>
			</div>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
	</div>
</template>

<script>
	import farmApi from "@/api/farm.js"
	import sortApi from "@/api/sort.js"
	export default {
		data() {
			return {
				total: 0,
				pageSize: 30,
				currentPage: 1,
				input: "",
				farmData: [],
				HotFarmData: [],
				sortDta: [],
				currentsort: null,
			}
		},
		methods: {
			async handleSearch() { //搜索
				const res = await farmApi.SearchFarm("/znFarmproduce/SearchFarm");
				this.FarmAll();
			},
			async FarmAll() {
				const res = await farmApi.SearchFarmAll("/znFarmproduce/FindAllProduce", {
					input: this.input,
					pageId: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.farmData = res.data.records;
					this.total = res.data.total;
					this.currentsort= null;
				}
			},
			async SortSearchFarm(sortValue){//分类查询
				const res = await farmApi.SortSearchFarm("/znFarmproduce/SortSearchFarm",{
					sort: sortValue,
					pageId: this.currentPage,
					pageSize: this.pageSize
				});
				if(res.code == 200){
					this.farmData = res.data.records;
					this.total = res.data.total;
					this.currentsort= sortValue;
				}
			},
			minSpecPrice(item) {
				// 计算每个 item 对应的最小 znSpecPrice
				if (!item || !item.specificationBeans) {
					return null;
				}
				const prices = item.specificationBeans.map(spec => spec.znSpecPrice);
				const minPrice = Math.min(...prices);
				return minPrice;
			},
			handleSortClick(sortValue) {
			      this.SortSearchFarm(sortValue);
			},
			async SortAll() {
				const res = await sortApi.queryAllSort("znSort/queryAllSort");
				if (res.code == 200) {
					this.sortDta = res.data;
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				if(this.currentsort){
					this.handleSortClick(this.currentsort);
				}else{
					this.FarmAll();
				}
				
			},
			skipFarmInfo(item) {
				this.$router.push({
					path: `/FarmInfoPage/${item}`
				}).catch(err => err);
			}

		},
		created() {
			this.FarmAll();
			this.SortAll();
			// this.HotFarm();
		}
	}
</script>

<style lang="scss" scoped>
	.Body {
		margin: 0 13% 3% 13%;
		position: relative;
		.searchBox {
			margin: 20px 0 20px 0;
		}

		.sortBox {
			height: 50px;
			display: flex;
			align-items: center;
			border-bottom: 1px dashed #ddd;
			margin-bottom: 15px;
			span {
				font-size: 20px;
			}

			a {
				margin: 0 15px 0 15px;
				color: #666 !important;
				/* 设置链接文本颜色 */
				text-decoration: none;
				/* 去除下划线 */
				font-weight: bold;
				/* 设置文本为粗体 */
			}
		}

		.farmBody {
			width: 100%;
			display: flex;

			.FarmBox {
				display: flex;
				flex-wrap: wrap;

				.farmCard {
					margin: 0 10px 15px 0;
					width: 220px;
					height: 300px;

					img {
						margin: 0 0 10px 0;
						width: 100%;
						height: 100%;
					}

					::v-deep .el-card__body {
						padding: 0;
					}

					.farmname {
						margin: 0 8px 10px 8px ;
						
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						span {
							font-size: 12px;
						}

					}
				}
			}

			.framHot {
				margin-right: 20px;
				width: 18%;
				height: 86.5vh;
				background-color: #e7e7e7;
				border-radius: 4px;

				h1 {
					margin: 30px 0 50px 10px;
					line-height: 0;
					font-size: 26px;
					color: #2c92f8;
				}

				ul {
					margin-left: 35px;
					list-style: none;
					/* 去除默认点样式 */
					padding-left: 0;
					font-size: 16px;

					li {
						margin-bottom: 30px;
					}
				}
			}
		}

		.footer_page {
			height: 10%;

			.el-pagination {
				position: absolute;
				right: 2%;
				bottom: 0%;
				transform: translateY(100%);

			}
		}
	}
</style>